<template>
  <div>
    <div class="acticle" v-if="createflag">
      <ul class="list-unstyled">
        <div class="acticleHeader">
          <span>发表的文章</span>
          <span><el-button type="primary" size='small' @click="goCreateActicle">编写文章</el-button></span>
        </div>
        <b-media
          tag="li"
          class="my-4"
          @click="goDetail(item.id)"
          v-for="item in myActicleList"
          :key="item.id"
        >
          <template v-slot:aside>
            <img src="../../assets/logo.png" alt="Media Aside" width="64" />
            <!-- <b-img blank blank-color="#abc" width="64" alt="placeholder" ></b-img> -->
          </template>
          <h5 class="mt-0 mb-1">{{item.title}}</h5>
          <p class="mb-0">
            {{item.zhaiyao}}
            <span class="timeAndclick">
              <span>发表时间：{{item.add_time}}</span>
              <span>点击：{{item.click}}次</span>
            </span>
          </p>
        </b-media>
      </ul>
    </div>
    <div class="createnews" v-else>
      <h3>还未发表过文章</h3>
      <h4>
        <router-link to="/newscreate">快去发表吧</router-link>
      </h4>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myActicleList: [],
      createflag: false,
      token:this.$store.state.token,
    };
  },
  methods: {
    getmyArticleList() {
      // 去除token中的斜杆方法
          var reg = new RegExp('-','gi');
          var result = this.token.replace(reg,'');
          this.token = result
      this.$http.get('/client/client_detail/' + this.token + '/fabiao/1/8').then(res => {
        window.console.log(res)
        var arrsum=[]
        for(var i =0;i<res.max_wen;i++){
          arrsum.push({id:res.data.no[i],name:res.data.name[i],zhaiyao:res.data.zhaiyao[i],add_time:res.data.time[i],click:res.data.count[i]})
        }
        this.myActicleList = arrsum
        window.console.log(this.myActicleList)
      });
    },
    goCreateActicle(){
      this.$router.push('/newscreate')
    },
    goDetail(param) {
      this.$router.push("/newsinfo/" + param);
    }
  },
  created() {
    this.getmyArticleList()
    if (this.myActicleList.length != 0) {
      this.createflag = true;
    }
  }
};
</script>
<style scoped>
.acticleHeader{
  display: flex;
  justify-content: space-between;
}
.my-4:hover {
  background-color: #eff;
}
.timeAndclick {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: blue;
}
.createnews {
  text-align: center;
  padding-top: 50%;
  transform: translateY(-40%);
}
</style>